<template>
    <el-scrollbar>
        <div class="box">
            <el-skeleton :loading="data.isFisrt" animated :rows="10">
                <div style="min-height: 75vh;">
                    <el-timeline>
                        <el-timeline-item placement="top" v-for="(item, index) in data.data" :key="index"
                            :timestamp="item.createtime">
                            <el-link>{{ item.name }}</el-link>
                            <label style="color:gray;font-size: 11px;"> ({{ item.result == 0 ? '待定' : '成功' }})</label>
                            <label style="float: right;color:gray;font-size: 12px;">
                                <el-icon>
                                    <Location />
                                </el-icon>{{ item.location }}
                            </label>
                            <el-alert :closable="false" type="success">
                                {{ item.content }}
                            </el-alert>
                            <div style="display: flex;">
                                <div class="flex:1">
                                    <label style="font-size: 12px;color:gray;">预估成功率：<spam style="color:crimson;">{{
                                            item.success }}%</spam></label>
                                </div>
                                <div style="flex: 1;text-align: right;">
                                    <el-tag type="success" size="small" v-if="item.isconvert === 1">√已完成</el-tag>
                                    <el-tag type="danger" size="small" v-if="item.isconvert === 0">未完成</el-tag>
                                </div>
                            </div>
                        </el-timeline-item>
                    </el-timeline>
                </div>
                <div style=" display: flex;  border-radius: 5px;cursor: pointer; margin-left: 10px;">
                    <div style="flex: 1;padding: 4px;" >
                        <el-button type="primary" @click="event.add_record" :disabled="data.isEdit" style="width:100%">新增记录</el-button>
                    </div>
                </div>
            </el-skeleton>
        </div>
    </el-scrollbar>
</template>

<script setup lang="ts">

import { Get_Customer_Records } from '@/api/customer';
import type { customer_Record_Dto } from '@/Dto/Request/customer/customer_Record_Dto';
import Api_Code from '@/Dto/Response/Api_code';
import { onMounted, reactive } from 'vue';
import { Location } from '@element-plus/icons-vue';


const data = reactive<customer_Record_Dto>({
    isFisrt: true,
    isEdit:false,
    data: []
});

const emit = defineEmits(['add_record']);

const methods = {
    async bind() {
        const res = await Get_Customer_Records({
            id: sessionStorage.getItem("customer_id") || ""
        });
        console.log(res.data)
        if (res.code === Api_Code.ok) {
            data.data = res.data;
            res.data.forEach((d:any) => {
                if(d.isconvert===1){
                    data.isEdit=true
                }
            });
        }
    }
}

const event = {
    add_record() {
        emit('add_record')
    }
}
onMounted(async () => {
    await methods.bind();
    data.isFisrt = false;
})

defineExpose({
    methods
});

</script>

<style scoped>
.box {
    position: relative;
    height: calc(100vh - 120px);
    padding-bottom: 35px;

}
</style>